<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        - flex是Flexible Box的缩写，译为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以被指定为flex布局
            - 当我们为父元素设置为flex布局之后，子元素的float、clear和vertical-align都将失效
            - 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局;
            - 采用flex布局的元素，称为flex容器(flex container)，简称''容器''，他所有的子元素自动成为容器成员，称为flex项目(flex item)，简称"项目";
     -->
</body>
</html>